<template>
    <div style="width: 100%; height: 100%">
        <MainHeader class="slogan-header"></MainHeader>
        <div class="main-container-content contentBoxs  not">
            <el-row :gutter="10">
                <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                    <Commontitle title="全真模拟试卷" dec=""></Commontitle>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small" :inline="true"
                        label-width="68px">

                        <el-form-item label="对应教材" prop="textbookId">
                            <el-select v-model="queryParams.textbookId" placeholder="选择教材" clearable filterable
                                style="width:280px" @change="handleQuery">
                                <el-option v-for="dict in textbookArr" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="试卷难度" prop="status" clearable>
                            <el-select v-model="queryParams.status" placeholder="选择难度" clearable filterable
                                style="width:120px" @change="handleQuery">
                                <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini"
                                @click="handleQuery">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div class="lists_containers">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="(listItem, listIndex) in listArr"
                        :key="listIndex">
                        <div class="studentBook">
                            <div class="studentBook_item">
                                <div class="studentBook_item_label">
                                    <el-tag  effect="dark" size="mini">
                                        {{ listItem.type }}
                                    </el-tag>
                                </div>
                                <div class="studentBook_item_right" >
                                    <el-tooltip class="item" effect="dark" :content="listItem.name" placement="left">
                                        <div class="studentBook_item_right_title">
                                            {{ listItem.name }}
                                        </div>
                                    </el-tooltip>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            对应教材
                                        </div>
                                        <el-tooltip class="item" effect="dark" :content="listItem.textbook"
                                            placement="left">
                                            <div class="studentBook_item_right_item_info text_overflow_1">
                                                {{ listItem.textbook }}
                                            </div>
                                        </el-tooltip>

                                    </div>
                                    <div class="studentBook_item_right_item">
                                        <div class="studentBook_item_right_item_label">
                                            难度
                                        </div>
                                        <el-tooltip class="item" effect="dark" :content="listItem.difficulty"
                                            placement="left">
                                            <div class="studentBook_item_right_item_info text_overflow_1">
                                                {{ listItem.difficulty }}
                                            </div>
                                        </el-tooltip>
                                    </div>
                                    <div style="display: flex;align-items: center;">
                                        <div class="studentBook_item_right_item">
                                            <div class="studentBook_item_right_item_label">
                                                题目总数:
                                            </div>
                                            <div class="studentBook_item_right_item_info text_overflow_1">
                                                {{ listItem.questionTotal }}题
                                            </div>
                                        </div>
                                        <div class="studentBook_item_right_item" style="margin-left:10px;">
                                            <div class="studentBook_item_right_item_label">
                                                题目总分:
                                            </div>
                                            <div class="studentBook_item_right_item_info redColor text_overflow_1">
                                                {{ listItem.score }}分
                                            </div>
                                        </div>
                                        <div class="studentBook_item_right_item" style="margin-left:10px;">
                                            <div class="studentBook_item_right_item_label">
                                                考试限时:
                                            </div>
                                            <el-tooltip class="item" effect="dark" :content="listItem.series"
                                                placement="left">
                                                <div class="studentBook_item_right_item_info text_overflow_1">
                                                    {{ listItem.testLimit }}分钟
                                                </div>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                    <div class="studentBook_item_btnGroup">
                                        <el-button v-if="listItem.testNum==1" type="warning" size="mini"> 我测试过{{ listItem.testNum }}次</el-button>
                                        <el-button  size="mini" type="info" v-else>我测试过{{ listItem.testNum }}次</el-button>
                                        <el-button  size="mini" type="primary" @click="goToDetail(listItem)">开始测试</el-button>
                                    </div>




                                </div>
                            </div>
                        </div>

                    </el-col>
                </el-row>
            </div>
        </div>


        <!-- 放大图片显示 -->
        <div class="hideImgDivConatiners">
            <el-image ref="preview" class="hideImgDiv" :src="Showurl" :preview-src-list="[Showurl]"></el-image>
        </div>
        <!-- <MainFooter :showFixed="true" backgroundColor="rgba(58, 98, 215, 1)" /> -->
    </div>
</template>

<script>

export default {
    name: 'teachManageList',
    components: {

    },
    data() {
        return {
            Showurl: '',
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                textbookId: undefined,
                status: undefined,

            },
            listArr: [
                {
                    id:1,
                    name: '本科生病理学全真模拟卷1',
                    textbook: '病理学（第九版）',
                    difficulty: '本科生',
                    questionTotal: 50,
                    score: 100,
                    testLimit: 60,
                    testNum: 1,
                    type: '全真模拟'
                },
                {   id:2,
                    name: '2024淋巴瘤培训班全真模拟卷1',
                    textbook: '2024淋巴瘤培训班教程',
                    difficulty: '医生继教',
                    questionTotal: 50,
                    score: 100,
                    testLimit:90,
                    testNum: 0,
                    type: '全真模拟'

                },


            ],
            sysUseTypeArr: [
                { label: '本科生', value: '1' },
                { label: '研究生', value: '2' }
            ],
            textbookArr: [
                { label: '病理学（第九版）', value: '1' },
                { label: '《Robbins基础病理学》第8版英文改编版', value: '2' },
                { label: '高级病理学(研究生用)', value: '3' }
            ]

        };
    },
    mounted() {
        const { state } = this.$store;


    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    methods: {
        onPreview(item) {
            this.Showurl = item.img
            //调用image组件中的大图浏览图片方法
            this.$refs.preview.clickHandler();
        },
        handleQuery() {

        },
        goToDetail(item) {
            if (item.id) {
                this.$router.push({ path: "/simulationExamDetail", query: { name: item.name, id: item.id ,testLimit:item.testLimit} });
            } else {
                this.$message.warning("改教材未上架~");
            }

        }

    },
};
</script>

<style scoped lang="scss">
.hideImgDivConatiners {
    width: 0px;
    height: 0px;

    .hideImgDiv {
        width: 0px;
        height: 0px;
    }
}

.text_overflow_1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

}

.text_overflow_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}

.redColor {
    color: red !important;
}

.lists_containers {
    width: 100%;
    padding: 10px;
    padding-bottom: 30px;
    height: calc(100% - 94px);
    overflow-y: auto;
    box-sizing: border-box;

    .studentBook {
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 6px;
        box-shadow: 0px 4px 13px 0px rgba(66, 66, 157, 0.6);

        &_item {
            width: 100%;
            display: flex;
            cursor: pointer;
            box-sizing: border-box;
            padding: 10px;
            position: relative;
            &_btnGroup{
                margin-top:10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            &_label{
              position: absolute;
              top:0px;
              right:0px;
            }

            &_right {
                width: 100%;

                &_title {
                    font-size: 16px;
                    font-weight: 700;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 24px;
                }

                &_item {
                    margin-top: 8px;
                    font-size: 13px;
                    line-height: 20px;
                    color: #666;
                    display: flex;

                    &_label {
                        width: 60px;
                        color: #999;
                    }

                    &_info {
                        margin-left: 5px;
                        width: calc(100% - 65px);
                        color: #333;
                    }
                }

                &_auth {
                    margin-top: 8px;
                    font-size: 13px;
                    line-height: 20px;
                    color: #666;
                }

                &_dec {
                    margin-top: 8px;
                    font-size: 13px;
                    color: #666;
                    line-height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}
</style>
